<script setup>
	// import { ref, onMounted } from 'vue'
	import { listApi, readAllApi } from '@/apis/message.js'
	//  导入 hook 函数
	import { useList } from '@/hooks/index.js'
	const { list, hasMore, loadMore, isTriggered, resetList } = useList(listApi, 201)
	// // 1.  任务通知列表
	// const list = ref([])
	// //  == 请求参数 =》建议：和视图渲染无关的都定义普通变量，性能好 ==
	// const parmas = {
	// 	page: 1, // 第几页( 不要忘了传递给 api)
	// 	pageSize: 10 // 每页返回几条数据
	// }

	// const getList = async () => {
	// 	const { data } = await listApi(201, parmas.page)
	// 	console.log('任务通知：', data)
	// 	// 下一页数据追加到列表
	// 	// list.value = data.items
	// 	list.value.push(...(data.items || []))
	// 	//  每次请求完，判断是否有更多数据
	// 	//  说明：使用列表长度和后台数据总数判断
	// 	if (list.value.length === parseInt(data.counts)) {
	// 		//  没有数据了
	// 		hasMore.value = false
	// 	}
	// }

	// /**
	//  *  上拉加载更多（分页）
	//  * 需求：默认只加载第一页数据，列表滚动到最低部加载下一页数据
	//  * 1. 使用scroll-view组件绑定@scrolltolower="回调函数"=> 触底监听
	//  * 2. 在触底回调函数中对： 有没有数据了？有 =》   页码加 1，重新请求
	//  */
	// // 是否还有更多数据？ true 有 ｜ false 没有
	// const hasMore = ref(true)
	// // 加载更多数据的函数
	// const loadMore = () => {
	// 	// 1. 没有数据
	// 	if (!hasMore.value) return uni.showToast({
	// 		title: '没有更多数据！'
	// 	})
	// 	// 2. 还有数据
	// 	parmas.page++
	// 	getList()

	// }

	// /**
	//  * 下拉刷新
	//  *  需求：用户向下滑动列表，触发列表数据的刷新（从第一页数据开始，重新请求渲染）
	//  * 1. 使用scroll-view组件:
	//  *     1. 绑定@refresherrefresh="回调函数"=> 下拉监听
	//  *     2. 绑定属性refresher-enabled =》开启下拉刷新
	//  *     3. 绑定:refresher-triggered="isTriggered" =》true 显示动画 ｜ false 关闭动画
	//  *    
	//  * 2. 在下拉监听回调函数中：
	//  * 			 1. 开启下拉刷新动画
	//  *       2. 页码重置为 1；列表重置为[]; 是否有更多数据重置 true
	//  *       3. 重新获取列表数据
	//  *       4. 关闭下拉刷新动画
	//  */
	// const isTriggered = ref(false)
	// const resetList = async () => {
	// 	//  开启下拉刷新加载动画
	// 	isTriggered.value = true
	// 	//  重置列表
	// 	parmas.page = 1
	// 	list.value = []
	// 	hasMore.value = true
	// 	// 重新发请求
	// 	await getList()
	// 	// 请求成功后关闭加载动画
	// 	isTriggered.value = false
	// }

	// // 2.  发送请求
	// onMounted(() => {
	// 	getList()
	// })

	//  所有消息修改为已读
	const readAll = async () => {
		/**
		 * 1. 调用后台接口修改所有消息的已读状态
		 * 2. 前端把现有数据循环处理
		 */
		await readAllApi(201)

		list.value.forEach(item => {
			// 把前端已加载数据可读状态改为 1（已读）
			item.isRead = 1
		})
	}
</script>
<template>
	<scroll-view refresher-enabled :refresher-triggered="isTriggered" @refresherrefresh="resetList"
		@scrolltolower="loadMore" class="scroll-view" scroll-y>
		<view class="scroll-view-wrapper">
			<view class="message-action" @click="readAll">
				<text class="iconfont icon-clear"></text> 全部已读
			</view>
			<uni-card v-for="notify in list" :key="notify.id" :border="false" :is-shadow="false">
				<view class="brief">{{ notify.content }}</view>
				<view class="extra">
					<text class="time">{{ notify.created }}</text>
					<navigator hover-class="none" class="link" :url="`/subpkg_task/detail/index?id=${notify.id}`">查看详情</navigator>
				</view>
				<template v-slot:title>
					<!-- notify.isRead = 0 未读，追加类名unread  ｜ 1 已读 不显示红点  -->
					<view :class="{ unread: !notify.isRead }" class="title">您有新的运输任务</view>
				</template>
			</uni-card>
			<!--  没有消息显示 -->
			<view v-if="list.length === 0" class="message-blank">暂无消息</view>
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>